<template>
  <div>
    <div
      class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-red mdui-ripple"
      style="margin-left: 16px;margin-top: 16px;margin-bottom: 16px"
      @click="to_edit('', 'add')"
    >
      <span class="mdui-chip-title">添加文章</span>
    </div>
    <div class="mdui-table-fluid mr-l-30">
      <table class="mdui-table mdui-table-hoverable">
        <thead>
          <tr>
            <th>文章标题</th>
            <th>文章类型</th>
            <th>文章权重</th>
            <th>文章状态</th>
            <th>添加时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in dataList">
            <td style="max-width:200px">{{ item.title }}</td>
            <td>{{ item.articleTypeName }}</td>
            <td>{{ item.weight }}</td>
            <td>
              <span>{{ ["禁用", "启用"][item.state] }}</span>
            </td>
            <td>{{ item.createTime | formatTime }}</td>
            <td>
              <button
                class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple"
                @click="to_edit(item.id, 'view')"
              >
                <span>查看</span>
              </button>
              <button
                class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-blue mdui-ripple"
                @click="to_edit(item.id, 'edit')"
              >
                <span>编辑</span>
              </button>
              <button
                class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-red mdui-ripple"
              >
                <span>删除</span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="mdui-dialog" id="commodity_list_dialog">
        <!-- <div class="mdui-dialog-title">分类编辑</div>
        <div class="mdui-dialog-content">
          <div class="mdui-textfield">
            <label class="mdui-textfield-label">分类名称</label>
            <input class="mdui-textfield-input" type="text" v-model="name" />
          </div>
          <div class="mdui-textfield">
            <label class="mdui-textfield-label">分类权重</label>
            <input class="mdui-textfield-input" type="text" v-model="weight" />
          </div>
        </div>
        <div class="mdui-dialog-actions">
          <button class="mdui-btn mdui-ripple" v-on:click="update()">
            确定
          </button>
        </div> -->
      </div>
    </div>
    <pagination
      style="margin:20px 0px 0 20px"
      v-model="queryInfo.page"
      :records="total"
      :per-page="queryInfo.pageSize"
      @paginate="pageChange"
    />
  </div>
</template>

<script>
import * as mdui from "mdui";
import axios from "axios";
import qs from "qs";
const BASE_URL = "http://127.0.0.1:8886";
export default {
  name: "",
  data() {
    return {
      queryInfo: {
        page: 1,
        pageSize: 10,
        flag: 2
      },
      total: 0,
      dataList: []
    };
  },
  components: {},
  created() {
    this.getArticleList();
  },
  filters: {
    formatTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, " ");
    }
  },
  methods: {
    to_edit(id, method) {
      console.log(id);
      this.$router.push({
        name: "article_edit",
        params: {
          article_id: id,
          mode: method
        }
      });
    },
    // 分页
    pageChange() {
      this.getArticleList();
    },
    getArticleList() {
      axios({
        method: "GET",
        url: BASE_URL + "/article/getArticleByPage",
        params: this.queryInfo,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(re => {
        const {
          data: { data: result }
        } = re;
        this.dataList = result;
        this.total = re.data.total;
      });
    }
  }
};
</script>

<style scoped>
.mdui-container {
}
.mr-l-30 {
  margin-left: 15px;
}
</style>
